// import { Button, Card, Tabs, List, Badge, Row, Col } from 'antd'
import {
    // useEffect,
    useLayoutEffect, useState, useRef, useCallback
} from 'react'
/**
 *  websocket 即使通讯需求分析
 *  1. 心跳机制
 *  2. 短线重连
 *  3. 主动会话
 */
const Ws = () => {
    const ws = useRef(WebSocket | null)
    const [message, setMessage] = useState('')
    const [readyState, setReadyState] = useState('正在链接中')
    const [rdNum, SetRdNum] = useState(0)
    const numRef = useRef([])
    // const [numArr, SetNumArr] = useState([])
    /**
  * 伪随机函数，测试用
  *  
  * */
    const getRandomInt = useCallback(() => {
        SetRdNum(Math.floor(Math.random() * Math.floor(999)))
    }, [])
    const webSocketInit = useCallback(() => {
        const stateArr = [
            '正在链接中',
            '已经链接并且可以通讯',
            '连接正在关闭',
            '连接已关闭或者没有链接成功',
        ]
        if (!ws.current || ws.current.readyState === 3) {
            ws.current = new WebSocket('ws://192.168.12.105:7070')
            ws.current.onopen = _e =>
                setReadyState(stateArr[ws.current?.readyState ?? 0])
            ws.current.onclose = _e =>
                setReadyState(stateArr[ws.current?.readyState ?? 0])
            ws.current.onerror = e =>
                setReadyState(stateArr[ws.current?.readyState ?? 0])
            ws.current.onmessage = e => {
                setMessage(e.data)
                numRef.current = [...e.data, ...numRef.current]
                // SetNumArr([e.data, ...numArr])
            }
        }
    }, [ws])
    /**
     * 初始化 WebSocket
     * 且使用 WebSocket 原声方法获取信息
     *  */
    useLayoutEffect(() => {
        getRandomInt()
        webSocketInit()
        return () => {
            ws.current?.close()
        }
    }, [ws, getRandomInt, webSocketInit])
    console.log('ws.readyState', ws.current?.readyState)
    return (
        <>
            {/* <Header status={} />
             */}
            {readyState}
            <div className='container'>
                <div>{message}</div>
                {/* <div>{readyState}</div> */}
                <div
                    onClick={() => {
                        ws.current?.close()
                    }}>
                    Clone
                </div>
                <div
                    onClick={() => {
                        getRandomInt()
                        webSocketInit()
                    }}>
                    start
                </div>
                <div
                    onClick={() => {
                        if (ws.current?.readyState !== 1) {
                            console.log('尚未链接成功')
                            setMessage('正在链接')
                            return
                        }
                        ws.current?.send(rdNum.toString())
                    }}>
                    ID:{rdNum}
                </div>
                <div>numArr:{numRef.current.join(' ')}</div>
            </div>
        </>
    )
}
export default Ws